<template>
  <TablePage>
    <template #top>
      <SearchForm title="收费员管理" :keyword-search-data="[{ key: 'noName', label: '工号或名称' }]" @search="search">
        <template #extraButtons>
          <a-button class="mr-2" type="primary" ghost @click="exportUser">导出</a-button>
          <a-button type="primary" @click="showCreateModal">新增收费员</a-button>
        </template>
      </SearchForm>
    </template>
    <SlTable :columns="columns" row-key="id" :data-source="tableData" :pagination="pagination" :loading="tableLoading">
      <template #bodyCell="{ column, record }">
        <div v-if="column.key === 'oper'">
          <a @click="showUpdateModal(record)">编辑</a>
          <a class="ml-2 text-red-400" @click="handleDelete(record)">删除</a>
        </div>
        <a-image
          v-else-if="column.dataIndex === 'face'"
          :src="record.face || DEFAULT_IMG_BASE64_STR"
          :fallback="DEFAULT_IMG_BASE64_STR"
          :width="record.face ? 150 : 50"
          :preview="!!record.face"
        ></a-image>
      </template>
    </SlTable>
    <CURDDialog
      id-key="id"
      :columns="columns"
      create-title="新增收费员"
      update-title="编辑收费员"
      delete-message="确认删除该收费员吗？"
      :show-options="showOptions"
      :model="model"
      :model-form-setting="modelFormSetting"
      :model-rules="modelRules"
      :table-data="tableData"
      :oper-data="operData"
      :curd="curd"
      :reload-table="reloadTable"
    />
  </TablePage>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { downloadFile, handleDateRowRender } from "/@/utils/common";
import { FormItemComponentType, CURDAction } from "/@/components/CURDDialog/models";
import type { FormItemData, OperItem, ShowCURDModalOptions } from "/@/components/CURDDialog/models";
import type { TableProps } from "ant-design-vue";
import { PatternKey } from "/@/utils/verify";
import { Api } from "/@/api/main/civilizedService";
import { TollCollectorItem, Sex } from "/@/api/main/civilizedService/models";
import { exportReq } from "/@/api/common";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/file";

const { t } = useI18n();
const columns = ref<TableProps<TollCollectorItem>["columns"]>([
  {
    title: "工号",
    dataIndex: "jobNo",
  },
  {
    title: "姓名",
    dataIndex: "tollCollector",
  },
  {
    title: "性别",
    dataIndex: "sex",
    customRender({ text }) {
      return Sex[text] || "--";
    },
  },
  {
    title: "人脸",
    dataIndex: "face",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    customRender: handleDateRowRender,
  },
  {
    title: t("common.oper"),
    key: "oper",
    width: 100,
  },
]);
function search(model) {
  reloadTable({ model });
}
const model = ref<TollCollectorItem>({
  jobNo: "",
  tollCollector: "",
  sex: 0,
  face: "",
});
const modelRules = ["jobNo", "tollCollector", "sex", "face"];
const modelFormSetting: FormItemData<TollCollectorItem>[] = [
  {
    key: "jobNo",
    max: 32,
    pattern: PatternKey.code,
  },
  {
    key: "tollCollector",
    max: 250,
  },
  {
    key: "sex",
    type: FormItemComponentType.SELECT,
    props: {
      options: [
        { label: "男", value: 0 },
        { label: "女", value: 1 },
      ],
    },
  },
  {
    key: "face",
    type: FormItemComponentType.IMGUPLOAD,
    label: "人脸识别模板",
  },
];

const showOptions = ref<ShowCURDModalOptions>();

const { pagination, tableData, tableLoading, curd, reloadTable } = useCURD<TollCollectorItem>({
  getPageUrl: Api.tollCollectorsPage,
  updateUrl: Api.tollCollectorsPage,
  createUrl: Api.tollCollectorsPage,
  deleteUrl: Api.tollCollectorsPage,
});

const operData: OperItem<TollCollectorItem>[] = [
  {
    label: t("common.edit"),
    handler: showUpdateModal,
  },
];
function showCreateModal() {
  showOptions.value = { action: CURDAction.CREATE };
}
function showUpdateModal(record) {
  showOptions.value = { action: CURDAction.UPDATE, record };
}
function handleDelete(record) {
  showOptions.value = { action: CURDAction.DELETE, record };
}

async function exportUser() {
  const re = await exportReq(Api.tollCollectorsExport, {});
  if (re) {
    downloadFile(re, "收费员列表");
  }
}
</script>
